import React ,{useState ,useEffect} from 'react';
import {Input,notification} from 'antd'
import { ClearOutlined ,SyncOutlined ,ExpandAltOutlined} from '@ant-design/icons'
import 'dayjs/locale/zh-cn';
import './index.scss'
import CustomTable from '../../../../components/ccl/CustomTable';
import * as service from '../../../../api/ccl';
import { useNavigate } from 'react-router-dom';
const Bill = () => {
    const { Search } = Input;
    const history = useNavigate()
    const [data ,setData] = useState([])
    useEffect(() => {
        billList()
    },[])
    const billList = async() =>{
        const res = await service.billList()
        console.log(res.data.data);
        if(res.data.code == 200){
            if(res.data.code == 200){
                setData(res.data.data)
            }
        }
    }
   
    const onSearch = async(value: any) => {
        if(value != ''){
            const res = await service.selectByname({name:value,page:1,limit:5})
            if(res.data.code == 200){
                notification.success({message:'查询成功',duration:2})
                setData(res.data.data.records)
            }
        }
    };

    const handFlush = () => {
        history('/index/finance/bill')
    }
   
    const columns = [
        {
            title:'操作',
            key:'proname',
            width:'100px',
            render: (record:any) => (
                <div className='caoz'>
                    <ClearOutlined /> 
                </div>
            )
        },
        {
            title:'客户',
            key:'billName',
            dataIndex: 'billName',
        },
        {
            title:'初期应收金额',
            key:'billStartmoney',
            dataIndex: 'billStartmoney',
        },
        {
            title:'末期应收金额',
            key:'billEndmoney',
            dataIndex: 'billEndmoney',
        },
        {
            title:'初期应收金料',
            key:'billStartgold',
            dataIndex: 'billStartgold',
        },
        {
            title:'期末应收金料',
            key:'billEndgold',
            dataIndex: 'billEndgold',
        },
        {
            title:'期初应收银料',
            key:'billInterestsilver',
            dataIndex: 'billInterestsilver',
        },
        {
            title:'期末应收银料',
            key:'billEndsilver',
            dataIndex: 'billEndsilver',
        },
        {
            title:'计息金额',
            key:'billInterestmoney',
            dataIndex: 'billInterestmoney',
        },
        {
            title:'计息金料',
            key:'billInterestgold',
            dataIndex: 'billInterestgold',
        },
        {
            title:'计息银料',
            key:'billInterestsilver',
            dataIndex: 'billInterestsilver',
        },
    ]
    let newData = data.map((item:any,index:any) => ({
        key:index,
        index:item.billId,
        billEndgold:item.billEndgold,
        billEndmoney:item.billEndmoney,
        billEndsilver:item.billEndsilver,
        billInterestgold:item.billInterestgold,
        billInterestmoney:item.billInterestmoney,
        billInterestsilver:item.billInterestsilver,
        billName:item.billName,
        billStartgold:item.billStartgold,
        billStartmoney:item.billStartmoney,
        billStartsilver:item.billStartsilver
    }))
    return (
        <div className='bill'>
            <div className="header">
                <div className="header-right">
                    <div className="search">
                        <Search
                        placeholder="请输入客户名称"
                        allowClear
                        enterButton="搜索"
                        onSearch={onSearch}
                        />
                    </div>
                    <div className="operation">
                        <ClearOutlined />
                        <SyncOutlined  onClick={handFlush}/>
                        <ExpandAltOutlined />
                    </div>
                </div>
            </div>

            {/* 表格 */}
            <CustomTable columns={columns} data={newData} />
        </div>
    );
};

export default Bill;